<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通讯录</title>

<link href="./css/style.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="./js/application/memberindex.js"></script>
<script type="text/javascript" src="./js/application/memberAddressBookList.js?5"></script>
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script type="text/javascript" src="./laydate/laydate.js"></script>
</head>
<body>
<style>
.leftMenuTitle{background:url("./images/lefttop.gif") no-repeat;background-size: 4px 22px;background-position: 1px 7px;padding-left: 12px;}
    .leftMenuTitle span{border-bottom:0px;}
.incList{margin: 0px 20px;}
.left_title{background:url("./images/icon_addressbook.png") no-repeat;background-size: 22px;padding-left: 30px;font-size:16px;}
.right_title{padding-left: 30px;font-size:16px;}
.left_radios{margin:15px;}
.radio label{font-size:14px;}
.left_button{text-align: center;}
.cursor{cursor:pointer;float:right}
</style>
<div class="incList">	
	<div class="leftMenuTitle formtitle"><span id="infoTitle">通讯录</span></div>
	<div class="row">
		<div class="col-xs-6 col-md-4">
			<div class="left_title"></div>
			<div class="left_radios"></div>
			<div class="left_button"></div>
		</div>
	  	<div class="col-xs-12 col-md-8" style="border-left:1px solid #ccc;height:100%">
	  		<div class="row">
		  		<div class="col-xs-6 col-md-4" style="font-size:16px;font-weight:bold">通讯录</div><div class="col-xs-12 col-md-8" id="rightbtn">
		  		</div>
	  		</div>
	  		
	  		<div id="usual1" class="usual">     
            <div id="tab2" class="tabson">    
                <table class="tablelist">
                    <thead>
                        <tr>
                        	<th>姓名</th>
                            <th>手机号</th>
                            <th>部门</th>
                            <th>人脸识别照片</th>
                        </tr>
                    </thead>
                    <tbody id="userTable"></tbody>
                </table>

            </div>
        </div>
	  	
		</div>
	</div>

</div>

<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addModal_title">新增部门</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body"style="margin-bottom: 50px;">
	            <div class="formbody">
	
			    	<ul class="forminfo">
			        <li>
			            <label style="font-size:16px;float:left;">部门名称<b>*</b></label>
			            <input style="float:left;" name="mobile" id="deptName" type="text" class="dfinput" placeholder="请输入部门名称"/>
			        </li>
			        </ul>
			      </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" style="background: #fff;color: #000;border:1px solid;" data-dismiss="modal">取消</button>
                <button type="button" id="dept-save" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>
<style>
.table td, .table th{border:0px}
</style>
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">上传头像</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
	           <div class="formbody">
    <ul class="forminfo">
        <li>
            <label style="font-size:16px;float:left;">识别照片</label>
            <input id="face_url2" name="faceUrl"  formParameter="pic"  type="hidden" value=""/>
            <form style="float:left;" id="headForm2" action="/euc/center/member/uploadWithMemberId" method="post" enctype="multipart/form-data">
            <input id="memberId" name="memberId"  type="hidden" value=""/>
                <span id = "show_head2" style="display: none">
                    <img style="max-width:300px;height:200px;"  formParameter="pic"  name="headImage2" id="headImage2"  onerror="this.src='images/img07.png'"/>
                </span>
                <input id="uploadpic2" name="file" type="file" style="width:400px;" value="上传"/>
            </form>
            </li>
            </ul>
            </div>
			</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" style="background: #fff;color: #000;border:1px solid;">关闭</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">头像</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
	           <img src='' style="width:100%;height:100%" id="head_url" />
			</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" style="background: #fff;color: #000;border:1px solid;">关闭</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="MemberModal" tabindex="-1" role="dialog" aria-labelledby="MemberModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">批量导入</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
	           <table class="table" style="width:400px;">
			    <tbody>
				<tr><td colspan=2 style="text-align: center;">
				<img id="excel_icon_upload" src="./images/excel01.png" width="100" height="100" />
				<form id="upload" action="/euc/member/uploadXls" method="post" enctype="multipart/form-data">
					<input name="file" type="file" id="upload_file" style="display:none" />
				</form>
				</td></tr>
				<tr><td colspan=2 style="text-align: center; color:red" id="upload_file_info"></td></tr>
				<tr><td colspan=2 style="text-align: center;"><a href="./images/template.xls" style="cursor: pointer;"><img src="./images/icon_file.png" width="20" height="20" />下载excel模板</a></td></tr>
			    </tbody>
			</table>


			</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btn_upload_save">确定导入</button>
                <button type="button" class="btn btn-default" data-dismiss="modal" style="background: #fff;color: #000;border:1px solid;">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addMemberModal" tabindex="-1" role="dialog" aria-labelledby="addMemberModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="add_title">新增会员</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body"style="margin-bottom: 20px;">
	            <div class="formbody">
    <ul class="forminfo">
        <li>
            <label style="font-size:16px;float:left;">手机号<b>*</b></label>
            <input style="float:left;" name="mobile" id="mobile" type="text" class="dfinput" placeholder="请输入手机号"/>

        </li>
        <li>
            <label style="font-size:16px;float:left;">识别照片</label>
            <input id="face_url" name="faceUrl"  formParameter="pic"  type="hidden" value=""/>
            <form style="float:left;" id="headForm" action="/euc/member/upload" method="post" enctype="multipart/form-data">
                <span id = "show_head" style="display: none">
                    <img style="max-width:300px;height:200px;"  formParameter="pic"  name="headImage" id="headImage"  onerror="this.src='images/img07.png'"/>
                </span>
                <input id="uploadpic" name="file" type="file" style="width:400px;" value="上传"/>
            </form>
        </li>
        <li></li>
        <li>
            <label style="font-size:16px;float:left;">邮箱<b>*</b></label>

            <input style="float:left;" name="email" id="email"  type="text" class="dfinput" placeholder="请输入邮箱"/>
        </li>
        <li></li>
        <li>
            <label style="font-size:16px;float:left;">部门选择<b>*</b></label>
           
            <select class="tlselect" name="deptId" id="dept_id" >
                <option value="0" selected>顶级部门</option>
            </select>
        </li>
        <li></li>
        <li>
            <label style="font-size:16px;float:left;">身份证<b>*</b></label>
            <input style="float:left;" name="idCard" id="idCard"  type="text" class="dfinput" placeholder="请输入身份证"/>
        </li>
        <li>
            <label style="font-size:16px;float:left;">姓名<b>*</b></label>
            <input style="float:left;" name="name" id="tname" type="text" class="dfinput" placeholder="请输入姓名"/>
        </li>
<li></li>
        <li id="pwd">
            <label style="font-size:16px;float:left;">默认密码</label>
            <span style="font-size: 16px;padding-top: 5px;">123456</span>
        </li>
    </ul>
</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" style="background: #fff;color: #000;border:1px solid;" data-dismiss="modal">取消</button>
                <button type="button" id="member-save" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>
<script>
$(function(){
	$('#addModal').on('hide.bs.modal', function () {
	  	$("#deptName").val('');
	})
	$('#addMemberModal').on('hide.bs.modal', function () {
	  	$("#deptName").val('');
	  	$("#member-save").removeAttr("data-id");
		$("#pwd").show();
		$("#addMemberModal #mobile").val('');
		$("#addMemberModal #email").val('');
		$("#addMemberModal #idCard").val('');
		$("#addMemberModal #tname").val('');
		
		$("#addMemberModal #dept_id").val(0).trigger('change');		
		$("#addMemberModal #show_head").hide();
		$("#addMemberModal #headImage").attr('src','');		
		$("#addMemberModal #face_url").val('');		
		$("#add_title").val("新增会员");
		
	})
	$('#viewModal').on('hide.bs.modal', function () {
	  	$("#head_url").attr('src','');
	})
	$('#uploadModal').on('hide.bs.modal', function () {
	  	$("#head_url").attr('src','');
	  	$("#memberId").val("");
	  	$("#uploadpic2").val("");
	})


})
</script>



</body>
</html>